<template>
  <div class="photowall">
    <iv-carousel autoplay  v-model="value1">
      <iv-carousel-item v-for="(item, index) in banners" :key="item.id">
        <div class="menu-container" ref="menuContainer" style="height: 500px">
            <a :href="item.imgHref" target="black">
              <img ref="bannerHeight" :src="item.imgUrl" @load="imgLoad" style="display: block; width: 100%; height: 100%"/>
            </a>
        </div>
      </iv-carousel-item>
    </iv-carousel>
  </div>
</template>

<script>
import merge from 'lodash/merge' // 合并对象工具

export default {
  data() {
    return {
      value1: 0,
      banners: [],
      bannerHeight: "",
    };
  },
  mounted() {
    // this.imgLoad();
    // window.addEventListener(
    //   "resize",
    //   () => {
    //     //防止在ie浏览器出现报错导致后面的代码不执行,所以这里直接捕获异常
    //     try {
    //       this.bannerHeight = this.$refs.bannerHeight[0].height;
    //       this.imgLoad();
    //     } catch (exception) {
    //       this.imgLoad();
    //     }
    //   },
    //   false
    // );
    this.loadImages();
  },
  methods: {
    //第一次加载获取图片在视口中的高度然后渲染页面
    imgLoad() {
      this.$nextTick(() => {
        //防止在ie浏览器出现报错导致后面的代码不执行,所以这里直接捕获异常
        try {
          this.bannerHeight = this.$refs.bannerHeight[0].height;
        } catch (exception) {}
      });
    },
    /**
     * 查询轮播图片
     */
    loadImages(){
      let param = {}
      let orderBy = {
        pageSize: 5,
        currentPage: 1
      }
      let params = merge(param,orderBy)
      this.$http({
        url: this.$http.adornUrl('/carousel/list'),
        method: 'get',
        params: this.$http.adornParams(params)
      }).then(({data}) => {
        if (data.result.data !== null && data.status === 0) {
          this.banners = data.result.data.list
        }
      })
    }
  },
};
</script>

<style lang="stylus" scoped>
img {
  max-width: 100% !important;
  height: auto !important;
}
</style>
